<template>
	<view class="container">
		<view class="forum_box">
			<view class="user_name">
				<view class="name_icon">
					<image :src="forum.imageUrl" class="name_icon" style="width: 100%;height:100%" />
					<!-- <view class="name_icon">
						{{item.name[0].toUpperCase()}}
					</view> -->
				</view>
				<view style="height: 100%;">
					<view class="name_text">{{forum.name}}</view>
					<view class="community_text">{{forum.communityName}}</view>
				</view>
				<view class="title_tag" v-if="forum.entity.inspect != '102' ">
					{{forum.entity.inspect == '101'?"审核中":"未通过"}}
				</view>
			</view>
			<view>
				<view class="forum_content" style="	font-weight: bold;">
					{{forum.entity.title}}
				</view>
				<view class="forum_content">
					{{forum.entity.content}}
				</view>
				<view class="forum_photo_box">
					<view class="photo_item" v-for="(img,i) in forum.imageEntityList" :key="i">
						<image :src="img.url" style="width: 100%;height:100%" @click="previewImg(forum,i)" />
					</view>
				</view>
			</view>
			<view class="forum_time">
				<view class="time_info">
					{{forum.entity.createDate}}
				</view>
				<view class="comment_info" v-if="forum.entity.inspect == '102' ">
					<span @click="addForumGive(forum)">
						<uni-icons type="hand-thumbsup" class="icon_class" style="margin-right: 5upx; font-size: 24upx;"
							:color="forum.isCancle == 1 ? 'red': ''" />
						<!-- :style="item.upClass == '' || item.upClass == undefined ? 'font-size: 20upx;':'color:red;font-size: 20upx;'" /> -->
						{{forum.entity.likes}}
					</span>
				</view>
			</view>
			<view v-if="forum.entity.inspect == '101'" class="underReview">本条内容仅自己可见</view>
			<view v-else-if="forum.entity.inspect == '100'" class="underReview">本条内容未通过审核，原因：{{forum.entity.inspectMsg}}
			</view>
		</view>
		<!-- 	<view class="forum_box">
			<view class="user_name">
				<view class="name_icon">
					<image :src="forum.nameIcon" style="width: 100%;height:100%;"></image>
				</view>
				<view style="height: 100%;">
					<view class="name_text">{{forum.userName}}</view>
					<view class="community_text">{{forum.communityName}}</view>
				</view>
			</view>
			<view class="forum_content">
				{{forum.commentInfo}}
			</view>
			<view class="forum_photo_box">
				<view class="photo_item" v-for="(item,index) in forum.photoImgs" :key="index">
					<image :src="item" style="width: 100%;height: 100%;" @click="previewImg(index)" />
				</view>
			</view>
			<view class="forum_time">
				<view class="time_info">
					{{forum.forumTime}}
				</view>
				<view class="comment_info"></view>
			</view>
		</view> -->
		<view class="comment_box" v-for="(item,index) in comments" :key="index">
			<view class="comment_user">
				<view class="name_icon1">
					<image :src="item.imageUrl" class="name_icon1" style="width: 100%;height:100%"></image>
				</view>
			</view>
			<view class="comment_right">
				<view class="comment_con">
					<view class="user_name_text">
						{{item.name}}
					</view>
					<view class="comment_text">
						{{item.neighborShareCommentEntity.content}}
					</view>
				</view>
				<view class="comment_time">{{item.neighborShareCommentEntity.createDate}}</view>
			</view>

		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
		<view class="input_box" v-if="forum.entity.inspect == '102' ">
			<view class="comment_input">
				<textarea placeholder-style="color:#B2B2B2;font-size:30upx" v-model="inputComment" cursor-spacing="14px"
					placeholder="发表你的看法" />
				<button type="default" class="release_button" @click="msgSecCheck()">评论</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				forum: {},
				page: 1,
				comments: [],
				loadingType: 'more',
				inputComment: ''
			}
		},
		onLoad(option) {
			this.forum = JSON.parse(decodeURIComponent(option.forum));
			this.getNeighborComments(1)
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onReachBottom() {
			if (this.loadingType === 'more') {
				this.page = this.page + 1;
				this.getNeighborComments(this.page)
			}
		},
		methods: {
			//点赞
			addForumGive(item) {
				let id = item.entity.neighborShareId
				let id1 = item.entity.userUuid
				let params = {
					"neighborShareId": id,
					"userUuid": id1
				}
				this.$api.request.likeOrCancel(params, (res) => {
					if (res.body.status.statusCode == 0) {
						item.entity.likes = res.body.data.like
						if (res.body.data.isCancle == 1) {
							item.isCancle = 1
						} else if (res.body.data.isCancle == 0 || res.body.data.isCancle == null) {
							item.isCancle = 0
						}
					}
				})

			},
			msgSecCheck(){
				if (this.inputComment == "") {
					uni.showToast({
						title: "请输入评论内容",
						icon: "none"
					})
					return;
				}
				let params = {
					content:this.inputComment,
					appId:uni.getStorageSync("appId")
				}
				this.$api.request.WXMsgSecCheck(params,(res) => {
					if(res.body.status.statusCode == 0){
						this.addComment()
					}else if(res.body.status.statusCode == 2 && res.body.data.wxjsonMsgCheck.errcode == '87014'){
						this.$api.msg("评论内容存在潜在风险，请重新输入")
					}else{
						this.$api.msg("系统错误")
					}
				})
			},
			//新增评论
			addComment() {
				
				let id = this.forum.entity.neighborShareId
				let id1 = this.userInfo.userUuid
				console.log(id)
				console.log(id1)
				console.log(this.inputComment)
				let params = {
					"neighborShareId": id,
					"userUuid": id1,
					"content": this.inputComment
				}
				this.$api.request.addNeighborComment(params, (res) => {
					if (res.body.status.statusCode == 0) {

						this.comments = []
						this.loadingType = 'more'
						//this.page置空
						this.page = 1
						this.getNeighborComments(1)
					}
				})
				this.inputComment = ''
			},
			previewImg(items, index) {
				let _this = this;
				let imgsArray = items.imageEntityList;
				let imgsArrayList = [];
				for (var i = 0; i < imgsArray.length; i++) {
					imgsArrayList.push(imgsArray[i].url);
				}
				uni.previewImage({
					current: index,
					urls: imgsArrayList
				});
			},
			getNeighborComments(page) {
				let UserID = this.userInfo.userUuid
				let params = {
					"neighborShareId": this.forum.entity.neighborShareId,
					// "userUuid": UserID,
					"inspect": "102",
					"page": page,
					"rows": "10"
				}
				this.$api.request.getNeighborComments(params, (res) => {
					if (res.body.status.statusCode == 0) {
						console.log("-----------")
						console.log(res.body)
						this.comments = this.comments.concat(res.body.data.voList)
						console.log(this.comments)
						if(this.comments.length >= res.body.data.total){
							this.loadingType = 'noMore'
						}
						
					}
				})
			}
		}
	}
</script>

<style>
	.container {
		width: 100%;
		background-color: #FBFBFB;
	}

	.forum_box {
		width: 100%;
		padding: 20upx 3% 30upx 3%;
		margin-bottom: 10upx;
		background-color: white;
	}

	.user_name {
		width: 100%;
		height: 100upx;
		line-height: 40upx;
		display: flex;
		flex-direction: row;
	}

	.name_icon {
		width: 80upx;
		height: 80upx;
		line-height: 80upx;
		border-radius: 50upx;
		background-color: #F4F4F5;
		color: white;
		text-align: center;
		font-weight: 800;
	}

	.name_icon1 {
		width: 60upx;
		height: 60upx;
		line-height: 60upx;
		border-radius: 50upx;
		background-color: #F4F4F5;
		color: white;
		text-align: center;
		font-weight: 800;
	}

	.name_text {
		margin-left: 20upx;
		font-size: 28upx;
		font-weight: 600;
	}

	.community_text {
		margin-left: 20upx;
		font-size: 22upx;
		font-weight: 200;
	}

	.title_tag {
		position: absolute;
		top: 20upx;
		right: 20upx;
		height: 40upx;
		border-radius: 10upx;
		line-height: 40upx;
		border: 1upx solid #1DA3EE;
		color: #1DA3EE;
		padding-right: 20upx;
		padding-left: 20upx;
		font-size: 22upx;
		text-align: center;
	}

	.forum_content {
		width: 100%;
		font-size: 26upx;
		margin-top: 20upx;
	}

	.forum_photo_box {
		width: 100%;
		margin-top: 20upx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap
	}

	.photo_item {
		width: 220upx;
		height: 220upx;
		margin-left: 15upx;
		margin-bottom: 15upx;
		/* background-color: #00AA00; */
	}

	.forum_time {
		width: 100%;
		height: 60upx;
		line-height: 60upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.time_info {
		width: 50%;
		height: 100%;
		font-size: 24upx;
		color: #888888;
	}

	.comment_info {
		width: 50%;
		height: 100%;
		text-align: right;
		font-size: 24upx;
	}

	.icon_class {
		/* font-size: 20upx; */
		margin-right: 5upx;
		margin-left: 20upx;
		/* color: red; */
	}

	.underReview {
		font-size: 24upx;
		color: #FF7B7B;
	}

	.text_input {
		height: 60upx;
		border: 1px solid white;
		border-radius: 30upx;
		background-color: #d5d5d5;
	}

	.comment_input {
		width: 100%;
		margin-top: 20upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	/deep/ textarea {
		font-size: 30upx !important;
	}

	input {
		padding-left: 30upx;
		height: 60upx;
		width: calc(100% - 180upx)
	}

	.release_button {
		height: 60upx;
		line-height: 60upx;
		font-size: 26upx;
		background-color: #4399FC !important;
		color: white !important;
		border-radius: 30upx;
		width: 140upx;
		padding: 0 !important;
		margin: 0;
	}

	.input_box {
		width: 100%;
		padding: 0 3%;
		height: 100upx;
		background-color: white;
		overflow: hidden;
		position: fixed;
		bottom: 0upx;
	}

	.comment_box {
		width: 100%;
		padding: 0 3%;
		background-color: white;
		display: flex;
		flex-direction: row;
	}

	.comment_user {
		margin-top: 40upx;
		width: 80upx;
	}

	.comment_right {
		width: calc(100% - 120upx);
		margin-top: 20upx;

	}

	.comment_con {
		width: 100%;
		background-color: #eeeeee;
		padding: 10upx 20upx;
		border-radius: 10upx;
	}

	.user_name_text {
		height: 40upx;
		line-height: 40upx;
		width: 100%;
		font-weight: bold;
	}

	.comment_text {
		margin-top: 15upx;
		line-height: 40upx;
	}

	.comment_time {
		height: 60upx;
		font-size: 24upx;
		color: #929292;
		line-height: 60upx;
		margin-left: 10upx;
	}
</style>
